<template>
  <div class="home" style="width: 100%;padding: 10px">
    <div style="margin:10px 0;">
      <el-input clearable v-model="search.name" placeholder="请输入姓名" style="width:20%;margin-right:10px;"></el-input>
      <el-input clearable v-model="search.phone" placeholder="请输入手机号" style="width:20%;margin-right:10px;"></el-input>
      <el-input clearable v-model="search.idCard" placeholder="请输入身份证号" style="width:20%;margin-right:10px;"></el-input>
      <el-button type="primary" @click="load">查询</el-button>
    </div>
    <div style="display: flex; align-items: center; margin: 10px 0;">  

<img src="..\..\public\ai.png" alt="图标" style="width: 80px; height: 80px; margin-right: 10px;margin-left: 10px;">
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" clearable v-model="typedText" placeholder="AI 智能行动指引" style="margin:10px 0;width:38.8%;margin-right:10px;"></el-input>
</div>
    <el-table :data="tableData" border stripe style="width: 100%;">
      <el-table-column prop="mostFrequentTime" label="高频下单时间" />
      <el-table-column prop="mostFrequentAddress" label="高频下单地址" />
      <!-- <el-table-column prop="remark" label="指引" /> -->
      
      <!-- <el-table-column fixed="right" label="操作" width="140">
        <template #default="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm title="你确定要删除吗?" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column> -->
    </el-table>
    <div style="margin:10px 0;"></div>
  </div>
</template>

<script>
import { request } from '@/utils/request';
import axios from 'axios';

export default {
  name: 'HomeView2',
  components: {

  },
  data() {
    return {
      suggest:"",
      typedText: '', // 当前已渲染的文本  
      isTyping: true, // 是否正在打字  
      typingInterval: 100, // 打字间隔（毫秒）  
      typingTimer: null, // 定时器ID 
      search: {
        name: '',
        phone: '',
        idCard: ''
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  beforeDestroy() {  
    this.stopTyping();  
  },
  methods: {
    load() {
      axios.post("/api/caseInformation/summon", {
        executor: this.search.name,
        phone: this.search.phone,
        idNumber: this.search.idCard,

      })
      .then(response => {
        const result = response.data;
        this.tableData = [result];
        this.typedText="";
        this.suggest = result.remark;
        this.startTyping();
      })
      .catch(error => {
        console.log('error', error);
      });
    },
    startTyping() {  
      this.typingTimer = setInterval(() => {  
        if (this.typedText.length < this.suggest.length) {  
          this.typedText += this.suggest[this.typedText.length];  
        } else {  
          this.stopTyping();  
        }  
      }, this.typingInterval);  
    },  
    stopTyping() {  
      if (this.typingTimer) {  
        clearInterval(this.typingTimer);  
        this.typingTimer = null;  
        this.isTyping = false; // 可选：如果你想要在打字完成后启用输入框  
      }  
    },  

    add() {
      this.dialogVisible = true;
      this.form = {};
    },

    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row));  // deep copy to prevent modifying original data
      this.dialogVisible = true;
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum;
      this.load();
    },

  }
}
</script>
